<template lang='pug'>
  .step-1
    .form-shebao-title.font-16.font-weight 基本信息
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="160")
      Row(type="flex" justify="start")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="客户名称：" prop="name")
            Input.input-has-border(v-model="formValidate.name" placeholder="请输入")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="客户编码：")
            Input.input-has-border(v-model="formValidate.code" placeholder="请输入")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="上级公司名称：")
            Select.input-has-border(v-model="formValidate.superCompanyId" filterable :label-in-value="true" placeholder="请选择" clearable @on-change="superCompanyIdChange")
              Option(v-for="(item, index) in getSuperCompanyIdArr()" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="合作状态：")
            Select.input-has-border(v-model="formValidate.status"  placeholder="请选择")
              Option(v-for="(item, index) in getCooperateStatuseTypeArr()" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="合作类型：" prop="type")
            Select.input-has-border(v-model="formValidate.type" placeholder="请选择" clearable)
              Option(v-for="(item, index) in getXooperateTypeArr()" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="客户分类：")
            Select.input-has-border(v-model="formValidate.category" :label-in-value="true" placeholder="请选择" clearable @on-change="categoryChange")
              Option(v-for="(item, index) in getCustomerCategoryArr()" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="公司性质：")
            Select.input-has-border(v-model="formValidate.character" :label-in-value="true" placeholder="请选择" clearable @on-change="characterChange")
              Option(v-for="(item, index) in getCustomerCharacterArr()" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="人事负责人姓名：" prop="hrContactName")
            Input.input-has-border(v-model="formValidate.hrContactName" placeholder="请输入" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="人事负责人电话：" prop="hrContactPhone")
            Input.input-has-border(v-model="formValidate.hrContactPhone" placeholder="请输入" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="人事负责人邮箱：")
            Input.input-has-border(v-model="formValidate.hrContactEmail" placeholder="请输入" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="关键决策人姓名：")
            Input.input-has-border(v-model="formValidate.inChargeContacName" placeholder="请输入" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="关键决策人电话：")
            Input.input-has-border(v-model="formValidate.inChargeContacPhone" placeholder="请输入" clearable)
            //- .ivu-form-item-error-tip(v-show="verify_phone") 填写正确的手机号码
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="关键决策人职务：")
            Input.input-has-border(v-model="formValidate.inChargeContacTitle" placeholder="请输入" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="公司邮箱：")
            Input.input-has-border(v-model="formValidate.email" placeholder="请输入" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="公司电话：")
            Input.input-has-border(v-model="formValidate.phone" placeholder="请输入" clearable)
            //- .ivu-form-item-error-tip(v-show="verify_ContacPhone") 填写正确的座机号码
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="公司网址：")
            Input.input-has-border(v-model="formValidate.webSite" placeholder="请输入" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="客户所在城市：" prop="costomerCity_arr")
            Cascader.input-has-border(v-model="formValidate.costomerCity_arr" placeholder="请选择" :filterable="true" :data="getAreaArr()" :load-data="loadDataCity" style="width:100%;" @on-change="costomerCityChange")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="邮政编码：")
            Input.input-has-border(v-model="formValidate.postCode" placeholder="请输入" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="所属客服：" prop="serverId")
            Select.input-has-border(v-model="formValidate.serverId" placeholder="请选择所属客服" filterable clearable :label-in-value="true" style="width:100%" @on-change="addServerIdChange")
              Option(v-for="(item, index) in getServerArr()" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="财务编码：")
            Input.input-has-border(v-model="formValidate.financeCode" placeholder="请输入" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="部门编码：")
            Input.input-has-border(v-model="formValidate.deptCode" placeholder="请输入" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="申报单位：")
            Select.input-has-border(v-model="formValidate.declareUnitId" placeholder="请选择申报单位" filterable clearable)
              Option(v-for="(item, index) in unitList" :value="item.id" :key="index") {{ item.name }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="客户到款月份：" :label-width="150")
            RadioGroup(v-model="formValidate.payDeadLineDayType")
              Radio(label="0") 当月
              Radio(label="1") 次月
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="客户到款日期：" prop="payDeadLineDay")
            Select.input-has-border(v-model="formValidate.payDeadLineDay" placeholder="请选择到款日期" filterable clearable)
              Option(v-for="(item, index) in days" :value="item.value" :key="index") {{ item.label }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="是否允许即时开票：")
            i-switch(v-model="formValidate.isForthwithInvoiceNo")
              span(slot="open") 是
              span(slot="close") 否
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="分类：")
            Select.input-has-border(v-model="formValidate.categoriesID" placeholder="请选择分类" multiple filterable clearable :label-in-value="true" @on-change="categoriesChange")
              Option(v-for="(item, index) in categoriesList" :value="item.value" :key="index") {{ item.text }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="开票方式：")
            Select.input-has-border(v-model="formValidate.invoiceManner" placeholder="请选择分类" filterable clearable)
              Option(v-for="(item, index) in invoiceMannerList" :value="item.value" :key="index") {{ item.text }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="备注：")
            Input(v-model="formValidate.remarks" placeholder="请输入" clearable)
      Divider.mt-0
      Row(type="flex" justify="start")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="签单公司：")
            Select.input-has-border(v-model="formValidate.signingCompanyId" placeholder="请选择" clearable)
              Option(v-for="(item, index) in getSigningCompany()" :value="item.value" :key="item.value") {{ item.text }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="所属部门：")
            Select.input-has-border(v-model="formValidate.departmentId" placeholder="请选择" clearable)
              Option(v-for="(item, index) in getDepartment()" :value="item.value" :key="item.value") {{ item.text }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="所属区域：")
            Select.input-has-border(v-model="formValidate.regionId" placeholder="请选择" clearable)
              Option(v-for="(item, index) in getRegion()" :value="item.value" :key="item.value") {{ item.text }}
      template(v-for="(item, index) in formValidate.salesInfo")
        Row(type="flex" justify="start" :key="index")
          Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
            FormItem(label="所属销售：")
              Select.input-has-border(v-model="item.salesId" placeholder="请选择" :label-in-value="true" clearable @on-change="salesChange")
                Option(v-for="(i, idx) in getSales()" :value="i.value" :key="i.value" :tag="idx") {{ i.text }}
          Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
            FormItem(label="销售占比：")
              .display-flex
                Input.input-has-border(v-model="item.ratio" type="number" placeholder="请输入")
                  div(slot="suffix" style="height: 100%; line-height:2.5") %
                Button.ml-20(type="error" ghost @click="delSalePeople(index)") 删除
      Divider.mt-0
        Button(type="info" size="small" @click="addSalePeople") 添加销售
      FormItem(label="办公地址：")
        Input.input-has-border(v-model="formValidate.address" type="textarea" placeholder="请输入" clearable)
      FormItem(label="公司简介：")
        Input.input-has-border(v-model="formValidate.description" type="textarea" placeholder="请输入" clearable)
    template(slot="footer")
      //- Button() 关闭
      Button 取消
      Button(type="info") 保存并跳转下一步
</template>

<script>
import dataApi from '@/api/data'
export default {
  name:'step_1',
  props:{
    customerId: String
  },
  inject: ['getSuperCompanyIdArr', 'getCooperateStatuseTypeArr', 'getXooperateTypeArr', 'getCustomerCategoryArr', 'getCustomerCharacterArr', 'getAreaArr', 'getServerArr', 'getSigningCompany', 'getDepartment', 'getRegion', 'getSales'],
  data () {
    return {
      unitList: [],
      unitId: '',
      // 基本信息
      formValidate: {
        costomerCity_arr: [],
        id: '', // 客户ID,新增为空
        name: '', // 客户名称
        code: '', // 客户编码
        superCompanyId: '', // 上级公司ID
        superCompanyName: '', // 上级公司名称
        status: '1', // 合作状态
        type: '', // 合作类型
        category: '', // 客户分类ID
        categoryName: '', // 客户分类名称
        character: '', // 公司性质
        characterName: '', // 公司性质名称
        hrContactName: '', // 人事负责人姓名
        hrContactPhone: '', // 人事负责人电话
        hrContactEmail: '', // 人事负责人邮箱
        inChargeContacName: '', // 关键决策人姓名
        inChargeContacPhone: '', // 关键决策人电话
        inChargeContacTitle: '', // 关键决策人职务
        phone: '', // 电话
        email: '', // 邮箱
        webSite: '', // 网站
        postCode: '', // 邮编
        cityId: '', // 客户所在城市ID
        cityName: '', // 客户所在城市名称
        AreaPath: '',
        address: '', // 地址
        serverId: '', // 客服id
        serverName: '', // 客服名字
        deptCode: '', // 部门编码
        financeCode: '', // 财务编码
        declareUnitId: '', // 申报单位
        categoriesID: [], // 分类ID
        invoiceManner: 0, // 开票方式
        categoriesName: '', // 分类名称
        categoriesInfo: [], // 分类id+name
        payDeadLineDayType: '0', // 客户到款月份 0-当月 1-次月
        payDeadLineDay: '', // 客户到款日期
        isForthwithInvoiceNo: false, // 是否需要反馈
        remarks: '', // 备注
        signingCompanyId: '', // 签单公司编码
        departmentId: '', // 所属部门编码
        regionId: '', // 所属区域
        salesInfo: [],
        description: '', // 描述
        rowversion: '' // 新为空,修改时原值返回
      },
      days: [{ value: 1, label: '1号' }, { value: 2, label: '2号' }, { value: 3, label: '3号' }, { value: 4, label: '4号' }, { value: 5, label: '5号' }, { value: 6, label: '6号' }, { value: 7, label: '7号' }, { value: 8, label: '8号' }, { value: 9, label: '9号' }, { value: 10, label: '10号' }, { value: 11, label: '11号' }, { value: 12, label: '12号' }, { value: 13, label: '13号' }, { value: 14, label: '14号' }, { value: 15, label: '15号' }, { value: 16, label: '16号' }, { value: 17, label: '17号' }, { value: 18, label: '18号' }, { value: 19, label: '19号' }, { value: 20, label: '20号' }, { value: 21, label: '21号' }, { value: 22, label: '22号' }, { value: 23, label: '23号' }, { value: 24, label: '24号' }, { value: 25, label: '25号' }, { value: 26, label: '26号' }, { value: 27, label: '27号' }, { value: 28, label: '28号' }, { value: 29, label: '29号' }, { value: 30, label: '30号' }, { value: 31, label: '31号' }],
      categoriesList: [],
      invoiceMannerList: [{ value: 0, text: '实发开票' }, { value: 1, text: '应发开票' }],
      // 验证规则
      ruleValidate: {
        costomerCity_arr: [
          { required: true, type: 'array', min: 1, message: '请选择地址', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入客户姓名', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择合作类型', trigger: 'change' }
        ],
        hrContactName: [
          { required: true, message: '请输入人事负责人姓名', trigger: 'blur' }
        ],
        serverId: [
          { required: true, message: '请选择所属客服', trigger: 'change' }
        ],
        hrContactPhone: [
          { required: true, message: '请输入人事负责人电话', trigger: 'blur' },
          // {type: "string", message: '电话格式不正确', pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, trigger: 'blur'}
        ],
        payDeadLineDay: [
          { required: true, type:'number', message: '请选到款日期', trigger: 'change' }
        ]
      }
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.getUnitList()
    this.getCategoriesList()
  },

  methods: {
    // 添加销售
    addSalePeople () {
      this.formValidate.salesInfo.push({
        salesId: '',
        salesName: '',
        ratio: ''
      })
    },
    // 删除销售
    delSalePeople (index) {
      this.formValidate.salesInfo.splice(index, 1)
    },
    // 上级公司选择
    superCompanyIdChange (val) {
      if (val) {
        this.formValidate.superCompanyName = val.label
      } else {
        this.formValidate.superCompanyName = ''
      }
    },
    // 客户分类选择
    categoryChange (val) {
      if (val) {
        this.formValidate.categoryName = val.label
      } else {
        this.formValidate.categoryName = ''
      }
    },
    // 公司性质选择
    characterChange (val) {
      if (val) {
        this.formValidate.characterName = val.label
      } else {
        this.formValidate.characterName = ''
      }
    },    
    // 分类选择
    categoriesChange (val) {
      // console.log('分类选择 val: ', val)
      // this.formValidate.categoriesName = val ? val.label : null
      this.formValidate.categoriesInfo = val.map(item => {
        return {categoriesID: item.value, categoriesName: item.label}
      })
      console.log('分类选择 this.formValidate.categoriesInfo: ', this.formValidate.categoriesInfo)
    },
    // 客户所在城市选择
    costomerCityChange (value, selectedData) {
      console.log(value, selectedData)
      this.formValidate.AreaPath = value.join(',')
      console.log(this.formValidate.AreaPath)
      if (value.length > 0) {
        this.formValidate.cityId = value[value.length - 1]
        this.formValidate.cityName = selectedData[selectedData.length - 1].name
      } else {
        this.formValidate.cityId = ''
        this.formValidate.cityName = ''
      }
    },
    // 所属客服选择
    addServerIdChange (val) {
      if (val) {
        this.formValidate.serverName = val.label
      } else {
        this.formValidate.serverName = ''
      }
    },

    // 所属销售选择
    salesChange (val) {
      console.log(val)
      if (val) {
        this.formValidate.salesInfo[val.tag].salesName = val.label
      } else {
        // this.formValidate.serverName = ''
        this.formValidate.salesInfo = [{
          salesId: '',
          salesName: '',
          ratio: ''
        }]
      }
    },
    /**
     * 分级查询地区
     */
    loadDataCity (val, callback) {
      val.loading = true
      if (val.levelID === 2) {
        dataApi.getCity({ parentId: val.value }).then(res => {
          val.children = res.data.data.map(item => {
            return {
              ...item,
              label: item.name,
              value: item.id,
              children: []
              // loading: false
            }
          })
          val.loading = false
          callback()
        })
      } else {
      }
    },
    // 获取申报单位下拉
    getUnitList () {
      // console.log(this.$store.state.user.companyID)
      dataApi.getUnitList({
        id: this.$store.state.user.companyID
      }).then(res => {
        this.unitList = res.data.data
        let arr = this.unitList.find(item => {
          return item.isDefault
        })
        this.unitId = arr.id
        this.formValidate.declareUnitId = this.unitId
      })
    },
    // 获取分类下拉
    getCategoriesList () {
      dataApi.GetSelectIdList({type: 'Categories'}).then(res => {
        this.categoriesList = res.data.data
      })
    },
    // 保存--基本信息
    stepSubmit () {
      console.log('this.formValidate: ', this.formValidate)
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          dataApi.postCustomer(this.formValidate).then((res) => {
            if (res.data.success) {
              this.formValidate.id = res.data.data.id
              this.formValidate.rowversion = res.data.data.rowversion
              this.$Message.success(res.data.message)
              this.$emit('set-id', res.data.data.id)
              this.$emit('on-next', 2)
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
        }
      })
    },
    // 重置数据
    refreshData () {
      this.$refs['formValidate'].resetFields()
      Object.assign(this.$data, this.$options.data())
    }
  },

  watch: {
  },

}

</script>
<style lang='' scoped>

</style>